<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 102 101"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#DC5501" d="M96 94.5v6.5h5.5L96 94.5ZM.5 0v5h6l-6-5Z"/><path fill="#FF6200" d="m101.5 63-63-63H.5l101 101V63Z"/><path fill="#fff" d="M40.576 22.746c.337.497.468 1.05.394 1.657a2.585 2.585 0 0 1-.772 1.566 2.66 2.66 0 0 1-1.351.745c-.489.104-1.001.055-1.538-.146-.536-.201-1.054-.554-1.553-1.059l-3.175-3.21 7.444-7.362 3.038 3.071c.5.505.846 1.02 1.041 1.544.203.531.25 1.033.14 1.507-.1.48-.337.903-.706 1.268-.434.43-.913.67-1.436.724-.517.061-1.025-.04-1.526-.305Zm-2.146-3.278 1.35 1.365c.352.355.701.551 1.047.589.354.03.68-.103.978-.398.299-.295.435-.62.409-.974-.027-.353-.216-.708-.567-1.063l-1.35-1.365-1.867 1.846Zm-1.67 4.625c.36.363.723.56 1.09.59.375.037.718-.099 1.031-.408.32-.317.463-.67.43-1.058-.026-.397-.218-.776-.577-1.139l-1.455-1.471-2.005 1.983 1.487 1.503Zm11.114 7.503a5.05 5.05 0 0 1-.619.527l-4.272-4.32c-.391.458-.577.938-.56 1.44.02.502.218.945.598 1.33.549.554 1.177.713 1.886.476l1.592 1.61a3.824 3.824 0 0 1-2.378.412c-.84-.125-1.61-.54-2.305-1.243-.563-.569-.945-1.204-1.146-1.905a3.864 3.864 0 0 1 .033-2.121c.216-.706.626-1.358 1.23-1.956.612-.605 1.272-1.011 1.98-1.22a3.663 3.663 0 0 1 2.1-.009c.692.202 1.326.594 1.903 1.177.556.562.93 1.183 1.125 1.863a3.518 3.518 0 0 1-.012 2.057c-.194.685-.58 1.312-1.156 1.882Zm-1.103-1.968c.377-.387.545-.828.505-1.323-.032-.503-.242-.95-.629-1.34-.365-.37-.788-.57-1.27-.601-.466-.031-.926.122-1.38.459l2.774 2.805Zm1.239 8.462c-.479-.483-.822-1.002-1.031-1.554-.202-.56-.267-1.101-.193-1.624.08-.516.292-.964.633-1.344l1.488 1.504c-.2.253-.28.55-.239.89.048.346.216.666.504.957.281.285.556.449.825.492.275.051.502-.01.68-.187.191-.19.235-.43.13-.72-.09-.29-.289-.705-.597-1.244a11.484 11.484 0 0 1-.745-1.415 2.72 2.72 0 0 1-.195-1.242c.038-.431.256-.844.654-1.238a2.182 2.182 0 0 1 1.17-.608c.46-.076.94-.017 1.441.177.509.2.998.54 1.47 1.016.695.704 1.073 1.441 1.133 2.212.066.764-.178 1.463-.733 2.096L52.99 34.83c.214-.253.3-.535.26-.847-.027-.311-.184-.612-.473-.904-.267-.27-.524-.43-.771-.482a.674.674 0 0 0-.627.199c-.2.197-.254.447-.163.752.097.297.3.709.608 1.234.315.532.553.992.714 1.382.16.39.218.804.173 1.242-.03.438-.238.855-.622 1.248a2.172 2.172 0 0 1-1.202.62c-.453.082-.933.023-1.441-.178-.494-.2-.973-.536-1.438-1.005Zm10.008.563L55.16 41.48c-.199.197-.299.388-.3.571.013.184.132.39.357.617l.686.694-1.258 1.244-.929-.938c-1.244-1.258-1.255-2.492-.032-3.702l2.847-2.816-.696-.704 1.226-1.213.697.704 1.46-1.445 1.488 1.503-1.461 1.445 1.308 1.323-1.227 1.213-1.308-1.323Zm10.22 4.808c.773.782 1.3 1.62 1.577 2.512.285.9.301 1.79.049 2.673-.238.883-.73 1.693-1.477 2.431-.747.739-1.562 1.222-2.448 1.45-.87.23-1.754.196-2.65-.099-.89-.287-1.722-.822-2.495-1.604l-2.574-2.602 7.444-7.363 2.574 2.602Zm-6.228 6.054c.774.782 1.585 1.176 2.433 1.18.849.005 1.66-.376 2.436-1.142.774-.767 1.168-1.578 1.18-2.434.019-.862-.359-1.684-1.132-2.467l-1.045-1.055-4.916 4.862 1.044 1.056Zm12.285 8.795a5.06 5.06 0 0 1-.618.527l-4.272-4.32c-.391.458-.578.938-.56 1.44.02.502.218.945.598 1.33.549.554 1.177.713 1.886.476l1.592 1.61a3.824 3.824 0 0 1-2.378.412c-.84-.125-1.61-.54-2.305-1.243-.563-.57-.945-1.204-1.146-1.905a3.865 3.865 0 0 1 .033-2.121c.216-.706.626-1.358 1.23-1.956.612-.605 1.272-1.011 1.98-1.22a3.664 3.664 0 0 1 2.1-.009c.692.202 1.326.594 1.903 1.177.555.562.93 1.183 1.125 1.862a3.518 3.518 0 0 1-.012 2.058c-.194.685-.58 1.312-1.156 1.882Zm-1.103-1.968c.377-.387.546-.828.506-1.323-.032-.503-.242-.95-.629-1.34-.365-.37-.789-.57-1.27-.601-.466-.031-.926.122-1.38.459l2.773 2.805Zm1.695 2.78c.597-.591 1.243-.998 1.937-1.22.701-.216 1.377-.244 2.026-.085a3.674 3.674 0 0 1 1.734 1.007c.436.44.727.912.873 1.415.153.51.193.998.12 1.465l.842-.834 1.487 1.504-5.908 5.844-1.488-1.504.864-.855c-.467.083-.962.045-1.484-.114-.508-.158-.98-.458-1.416-.898a3.57 3.57 0 0 1-.967-1.745c-.145-.659-.105-1.337.118-2.036.237-.699.658-1.347 1.262-1.945Zm4.578 4.67c.362-.358.601-.736.716-1.13.123-.403.132-.792.028-1.167a2.124 2.124 0 0 0-.557-.99 2.128 2.128 0 0 0-.962-.567 2.186 2.186 0 0 0-1.166.014c-.397.111-.773.343-1.129.694-.355.352-.598.732-.727 1.142-.116.41-.128.802-.039 1.177.097.382.28.709.547.979.274.277.598.47.972.578.382.1.77.096 1.167-.015.404-.118.787-.356 1.15-.715Zm9.344-.429-7.892 7.806-1.477-1.493 7.892-7.806 1.477 1.493Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group626552 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
